<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "1000px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: [
            "套管",
            "固定资产折旧",
            "工资",
            "固井",
            "柴油费",
            "其他",
            "泥浆",
            "施工机械租赁费",
            "垃圾处理费",
            "其他材料",
            "搬家费",
            "运输费用",
            "测井及录井分包费",
            "润滑油",
            "合计",
          ],
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#666666",
            fontSize: 12,
            interval: 0,
          },
        },
        grid: {
          left: "20%",
          right: "20%",
          bottom: "20%",
          top: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          background: "#fff",
          axisPointer: {
            type: "cross",
          },

          formatter: function (params) {
            var str = "";
            //首先要看看params是怎样的数据结构，里面有什么内容;
            console.log(params);
            //对params进行操作
            params.forEach((item) => {
              if (item.data == 0.01) {
                str += item.seriesName + ":" + 0 + "</br>";
              } else {
                str += item.seriesName + ":" + item.data + "</br>";
              }
            });
            return str;
          },

          padding: [5, 10],
        },
        yAxis: {
          name: "金额",
          nameTextStyle: {
            color: "#000",
            padding: [0, 0, 0, -60],
          },
          axisTick: {
            show: false,
          },
        },
        legend: {
          padding: [60, , 0, 0],

          data: ["408井", "415井", "464井"],
        },

        series: [
          {
            smooth: false,
            symbolSize: 6,
            name: "408井",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2,
                },
              },
            },

            type: "line",
            data: [
              0.01, 197668.71, 423796.69, 133644.44, 152407.9, 110167.41,
              90434.46, 48306.95, 71555.73, 108653.5, 64444.44, 41421.21,
              40503.1, 37039.34, 1520043.89,
            ],
            animationDuration: 2800,
            animationEasing: "cubicInOut",
            markLine: {
              data: [{ yAxis: 1520043.89 }],
              symbol: ["none", "none"],

              itemStyle: {
                normal: {
                  lineStyle: {
                    type: "dotted",
                    color: "#FF005A",
                    width: 2,
                  },
                  label: {
                    show: true,

                    padding: [0, -50, 0, 0],
                    formatter: function (params) {
                      let newArr = `${params.value}`;
                      return newArr;
                    },
                  },
                },
              },
              large: true,
              effect: {
                show: false,
                loop: true,
                period: 0,
                scaleSize: 2,
                color: null,
                shadowColor: null,
                shadowBlur: null,
              },
            },
          },
          {
            name: "415井",
            symbolSize: 6,
            type: "line",
            smooth: false,
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },

            data: [
              0.01, 203342.52, 283178.25, 218706.67, 127294.81, 173330.82,
              63373.4, 31080.64, 42032.98, 9795.83, 22222.22, 10415.0, 40122.61,
              201.83, 1225097.57,
            ],
            animationDuration: 2800,
            animationEasing: "quadraticOut",
            markLine: {
              data: [{ yAxis: 1210097.57 }],
              symbol: ["none", "none"],

              itemStyle: {
                normal: {
                  lineStyle: {
                    type: "dotted",
                    color: "#3888fa",
                    width: 2,
                  },
                  label: {
                    show: true,
                    padding: [0, -50, 0, 0],
                    formatter: function (params) {
                      let newArr = `${params.value}`;
                      return newArr;
                    },
                  },
                },
              },
              large: true,
              effect: {
                show: false,
                loop: true,
                period: 0,
                scaleSize: 2,
                color: null,
                shadowColor: null,
                shadowBlur: null,
              },
            },
          },

          {
            name: "464井",
            symbolSize: 6,
            type: "line",
            smooth: false,
            itemStyle: {
              normal: {
                color: "green",
                lineStyle: {
                  color: "green",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: [
              467322.0, 191045.09, 187066.55, 157263.0, 99838.12, 80467.9,
              77432.35, 65759.14, 56203.64, 52541.52, 35555.56, 2977.78,
              40457.78, 0.01, 1513930.43,
            ],
            animationDuration: 2800,
            animationEasing: "quadraticOut",

            markLine: {
              data: [{ yAxis: 1481930.43 }],
              symbol: ["none", "none"],
              itemStyle: {
                normal: {
                  lineStyle: {
                    type: "dotted",
                    color: "green",
                    width: 2,
                  },
                  label: {
                    show: true,

                    padding: [0, -50, 0, 0],
                    formatter: function (params) {
                      let newArr = `${params.value}`;
                      return newArr;
                    },
                  },
                },
              },
              large: true,
              effect: {
                show: false,
                loop: true,
                period: 0,
                scaleSize: 2,
                color: null,
                shadowColor: null,
                shadowBlur: null,
              },
            },
          },
        ],
      });
    },
  },
};
</script>
